<template>
	<view>
		<view style="display: flex; justify-content: flex-start; align-items: center; margin-top: 160rpx;">
			<image src="../../static/logo.png"
				style="height: 60rpx; width: 60rpx; border-radius: 30rpx; margin-left: 10rpx;"></image>
			<view style="width: 300rpx;">
				<u-tabs :font-size="25" active-color="#303133" inactive-color="#606266" :list="list" :current="current"
					@change="change"></u-tabs>
			</view>
			<view>
				<u-input placeholder="请输入内容" :border="true" />
			</view>
			<view style="margin-left: 6rpx; font-size: 40rpx; margin-right: 10rpx;" class="cuIcon-search"></view>
		</view>

		<view style="display: flex; flex-wrap: wrap;">
		  <view style="margin-top: 20rpx; display: flex; justify-content: flex-start; flex-wrap: wrap;">
		    <view style="height: 500rpx; box-shadow: 0px 2px 5px #f2f6fc; border-radius: 10rpx; width: 360rpx; margin-top: 10rpx; margin-left: 10rpx;">
		      <image mode="aspectFill" style="width: 360rpx; border-radius: 10rpx; height: 380rpx;" src="https://s2.loli.net/2023/04/05/lFeqjEL7zciPS2V.jpg"></image>
		      <view style="display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx;">
		        <image src="../../static/logo.png" style="height: 60rpx; width: 60rpx; border-radius: 30rpx; margin-left: 15rpx;"></image>
		        <view style="display: flex; width: 120rpx; justify-content: space-between; margin-right: 15rpx;">
		          <view class="cuIcon-like"></view>
		          <view class="cuIcon-message"></view>
		          <view class="cuIcon-share"></view>
		        </view>
		      </view>
		    </view>
		  </view>
		
		  <view style="margin-top: 20rpx; display: flex; justify-content: flex-start; flex-wrap: wrap;">
		    <view style="height: 500rpx; box-shadow: 0px 2px 5px #f2f6fc; border-radius: 10rpx; width: 360rpx; margin-top: 10rpx; margin-left: 10rpx;">
		      <image mode="aspectFill" style="width: 360rpx; border-radius: 10rpx; height: 380rpx;" src="https://s2.loli.net/2023/04/05/wtJXRP2EYpzZhOl.jpg"></image>
		      <view style="display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx;">
		        <image src="../../static/logo.png" style="height: 60rpx; width: 60rpx; border-radius: 30rpx; margin-left: 15rpx;"></image>
		        <view style="display: flex; width: 120rpx; justify-content: space-between; margin-right: 15rpx;">
		          <view class="cuIcon-like"></view>
		          <view class="cuIcon-message"></view>
		          <view class="cuIcon-share"></view>
		        </view>
		      </view>
		    </view>
		  </view>
		</view>
<view style="display: flex; flex-wrap: wrap;">
		  <view style="margin-top: 20rpx; display: flex; justify-content: flex-start; flex-wrap: wrap;">
		    <view style="height: 500rpx; box-shadow: 0px 2px 5px #f2f6fc; border-radius: 10rpx; width: 360rpx; margin-top: 10rpx; margin-left: 10rpx;">
		      <image mode="aspectFill" style="width: 360rpx; border-radius: 10rpx; height: 380rpx;" src="https://s2.loli.net/2023/04/05/bvi8xw2RMgTeqyF.jpg"></image>
		      <view style="display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx;">
		        <image src="../../static/logo.png" style="height: 60rpx; width: 60rpx; border-radius: 30rpx; margin-left: 15rpx;"></image>
		        <view style="display: flex; width: 120rpx; justify-content: space-between; margin-right: 15rpx;">
		          <view class="cuIcon-like"></view>
		          <view class="cuIcon-message"></view>
		          <view class="cuIcon-share"></view>
		        </view>
		      </view>
		    </view>
		  </view>
		
		  <view style="margin-top: 20rpx; display: flex; justify-content: flex-start; flex-wrap: wrap;">
		    <view style="height: 500rpx; box-shadow: 0px 2px 5px #f2f6fc; border-radius: 10rpx; width: 360rpx; margin-top: 10rpx; margin-left: 10rpx;">
		      <image mode="aspectFill" style="width: 360rpx; border-radius: 10rpx; height: 380rpx;" src="https://s2.loli.net/2023/04/05/oYq78XbH4ncghJQ.jpg"></image>
		      <view style="display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx;">
		        <image src="../../static/logo.png" style="height: 60rpx; width: 60rpx; border-radius: 30rpx; margin-left: 15rpx;"></image>
		        <view style="display: flex; width: 120rpx; justify-content: space-between; margin-right: 15rpx;">
		          <view class="cuIcon-like"></view>
		          <view class="cuIcon-message"></view>
		          <view class="cuIcon-share"></view>
		        </view>
		      </view>
		    </view>
		  </view>
		</view>
		<view style="position: fixed; z-index: 9999; width: 80rpx; height: 80rpx; border-radius: 40rpx; box-shadow: 2px 2px 5px #f2f6fc; display: flex; justify-content: center; align-items: center; right: 30rpx; bottom: 20rpx;">
			<view class="cuIcon-camera" style="font-size: 60rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '关注'
				}, {
					name: '发现'
				}, {
					name: '本地'
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
		}
	}
</script>

<style>

</style>
